<template>
  <div id="cart">
    <div class="cart_content">
      <!-- 计算单价 -->
      <div class="cart_info">
        <h2>购物车</h2>
        <div class="p_number">
          <div class="p_number_left">
            <p>用餐人数: {{orderInfo.personNum}}</p>
            <p v-if="orderInfo.remark">备注:{{orderInfo.remark}}</p>
            <p v-if="!orderInfo.remark">备注:无</p>
          </div>
          <div class="p_number_right">
            <router-link to="/editpeopleinfo">
              <img src="../assets/images/edit.png" />
              <p>修改</p>
            </router-link>
          </div>
        </div>
        <div class="cart_p_num">
          <p>购物车中总共有{{allNum}}个菜</p>
          <p>合计：<span class="price">￥{{allPrice}}</span></p>
        </div>
      </div>
      <!-- 购物车列表 -->
      <div class="cart_list">
        <ul>
          <li
            class="item"
            v-for="(item,index) of cartList"
            :key="index"
          >
            <div class="left_food">
              <img :src="item.goodsImg" />
              <div class="food_info">
                <p>{{item.title}}</p>
                <p class="price">￥{{item.shopPrice}}</p>
              </div>
            </div>
            <div class="right_cart">
              <div class="cart_num">
                <div
                  class="input_left"
                  @click="decNum(item,index)"
                >-</div>
                <div class="input_center">
                  <input
                    type="text"
                    readonly="readonly"
                    v-model="item.num"
                    name="num"
                  />
                </div>
                <div
                  class="input_right"
                  @click="incNum(item)"
                >+</div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="hot_food">
        <h3>本店顾客最长点的菜</h3>
        <div class="item_list_outer">
          <ul class="item_list">
            <li>
              <div class="inner">
                <img src="https://an-jia-shop.oss-cn-shenzhen.aliyuncs.com/order_goods/1586350487650521.jpeg" />
                <p class="title">香烤羊排</p>
                <p class="price">¥1</p>
              </div>
            </li>
            <li>
              <div class="inner">
                <img src="https://an-jia-shop.oss-cn-shenzhen.aliyuncs.com/order_goods/1580540081410152.jpeg" />
                <p class="title">牛肉饭</p>
                <p class="price">¥1</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <v-navfooter></v-navfooter>
    <div
      id="footer_book"
      class="footer_book"
    >
      <router-link to="/home">
        <img src="../assets/images/menu.png" />
        <p>菜单</p>
      </router-link>
    </div>
    <div
      id="footer_cart"
      class="footer_cart"
      @click="confirmOrder"
    >
      <img src="../assets/images/cart.png" />
      <p>下单</p>
    </div>
  </div>
</template>


<script>

//引入NavFooter组件
import NavFooter from './public/NavFooter.vue';
//引入配置文件
import Config from '../model/config.js';
import axios from 'axios';
export default {

  data () {
    return {
      api: Config.api,
      allPrice: 0,
      allNum: 0,
      tableId: '',
      cartList: [],
      orderInfo: {
        personNum: '',
        remark: '',
      }
    }
  },
  methods: {
    getCartList (tableId) {
      var api = this.api + `/front/cart/${tableId}`
      axios.get(api).then(data => {
        const { code, message, result } = data.data;
        if (Object.is(code, 0)) {
          this.cartList = result;
          this.getTotalResult();
        } else {
          console.log(message);
        }
      })
    },
    getOrderInfo (tableId) {
      var api = this.api + `/front/order/${tableId}`;
      axios.get(api).then(data => {
        const { code, message, result } = data.data;
        if (Object.is(code, 0)) {
          this.orderInfo = result;
        } else {
          console.log(message);
        }
      })
    },
    // 提交订单
    confirmOrder () {
      console.log(this.cartList);
      console.log(this.orderInfo);
      const { personNum, tableId, remark } = this.orderInfo;
      const postData = {
        personNum,
        tableId,
        remark,
        goodsList: this.cartList.map(item => {
          const { goodsId, num, title, shopPrice } = item;
          return { goodsId, num, title, shopPrice };
        })
      };
      console.log(postData);
      var api = this.api + '/front/order/confirm_order';
      axios.post(api, postData).then(data => {
        const { code, message } = data.data;
        if (Object.is(code, 0)) {
          this.$router.push({ path: '/order' });
        } else {
          console.log(message);
        }
      })
    },
    // 减少数量
    decNum (item, key) {
      const postData = {
        type: 0,
        tableId: this.tableId,
        goodsId: item.goodsId,
        num: item.num,
      };
      //
      var api = this.api + '/front/cart/change_cart';
      axios.post(api, postData).then(data => {
        const { code, message } = data.data;
        if (Object.is(code, 0)) {
          if (item.num > 1) {
            --item.num;
          } else {
            this.cartList.splice(key, 1);
          }
          this.getTotalResult();
          // this.socketio.socket.emit('addCart', this.tableId);
        } else {
          console.log(message);
        }
      })
    },
    // 增加数量
    incNum (item) {
      const postData = {
        type: 1,
        tableId: this.tableId,
        goodsId: item.goodsId,
        num: item.num,
      };
      var api = this.api + '/front/cart/change_cart';
      axios.post(api, postData).then(data => {
        const { code, message } = data.data;
        if (Object.is(code, 0)) {
          ++item.num;
          this.getTotalResult();
          // this.socketio.socket.emit('addCart', this.tableId);
        } else {
          alert('限售了');
          console.log(message);
        }
      })
    },
    // 计算总数量和总价
    getTotalResult () {
      let allPrice = 0;
      let allNum = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        let currentItem = this.cartList[i];
        allPrice += currentItem.shopPrice * currentItem.num;
        allNum += currentItem.num;
      }
      this.allPrice = allPrice;
      this.allNum = allNum;
    }
  },
  mounted () {
    this.tableId = window.localStorage.getItem('tableId')
    this.getCartList(this.tableId);
    this.getOrderInfo(this.tableId);
  },
  components: {
    'v-navfooter': NavFooter
  }
}
</script>

<style lang="scss" scoped>
.cart_content {
  padding: 1rem;
  /*头部信息*/
  .cart_info {
    background: #fff;
    h2 {
      text-align: center;
      font-size: 1.8rem;
      padding: 0.8rem 0px;
      border-bottom: 1px solid #eee;
    }
    border-radius: 0.5rem;
    padding: 0.5rem;
    .p_number {
      display: flex;
      padding: 0.5rem 0;
      border-bottom: 1px solid #eee;
      .p_number_left {
        flex: 1;
        p {
          line-height: 2;
          &:first-child {
            color: red;
          }
        }
      }
      .p_number_right {
        width: 4rem;
        height: 4rem;
        text-align: center;
        a {
          text-decoration: none;
          color: #555;
        }
        img {
          width: 1.8rem;
          height: 1.8rem;
          margin: 0 auto;
        }
      }
    }

    /*购物车总数量*/
    .cart_p_num {
      border-bottom: 1px solid #eee;
      p {
        line-height: 2;
        .price {
          font-size: 2.4rem;
          color: red;
        }
      }
    }
  }
  /*购物车列表*/
  .cart_list {
    margin-top: 1rem;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    display: flex;
    ul {
      width: 100%;
      .item {
        display: flex;
        width: 100%;
        border-bottom: 1px solid #eee;
        padding: 1rem 0px;
        .left_food {
          flex: 1;
          display: flex;
          img {
            width: 4rem;
            height: 4rem;
            border-radius: 10%;
            margin-right: 0.8rem;
          }
          .food_info {
            flex: 1;
          }
        }
        .right_cart {
          width: 10rem;
        }
      }
    }
  }

  /*最长点的菜*/
  .hot_food {
    background: #fff;
    margin-top: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 4rem;
    h3 {
      font-size: 1.4rem;
      padding: 0.5rem 0px;
    }

    .item_list_outer {
      width: 100%;
      overflow-x: auto;
      .item_list {
        padding: 0px 0.5rem;
        width: 50rem;
        li {
          width: 8rem;
          padding: 0.5rem;
          box-sizing: border-box;
          float: left;
          .inner {
            background: #fff;
            width: 100%;
            border-radius: 0.5rem;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

/*购车加减*/
.cart_num {
  width: 10rem;
  display: flex;
  margin-top: 0.8rem;
  .input_left,
  .input_right {
    flex: 1;
    width: 2.8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    text-align: center;
    color: red;
    border: 1px solid #eee;
    font-size: 2.4rem;
  }
  .input_center {
    flex: 1;
    input {
      width: 2rem;
      text-align: center;
      width: 100%;
      height: 2.8rem;
      border: none;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      float: left;
    }
  }
}

/*购车空*/

.cart_empty {
  text-align: center;
  line-height: 3;
  h3 {
    font-size: 1.8rem;
  }
}
</style>
